<template>
	<view class="visitor-info">
		<view class="avatar">
			
		</view>
		<view class="visitor-warp">
			<text class="visitor-remarks">{{ visitor.remarks || visitor.name }}</text>
			<text class="visitor-text">呢称：{{ visitor.name }}</text>
			<text class="visitor-text">邮箱：{{ visitor.email }}</text>
		</view>
	</view>
	<uni-list>
		<uni-list-item link clickable title="备注" :rightText="visitor.remarks"></uni-list-item>
	</uni-list>
	<view class="visitor-bar">
		<uni-list>
			<uni-list-item clickable @click="createConv">
				<template v-slot:body>
					<button class="visitor-btn send" plain>发消息</button>
				</template>
			</uni-list-item>
			<uni-list-item clickable>
				<template v-slot:body>
					<button class="visitor-btn del" plain>删除联系人</button>
				</template>
			</uni-list-item>
		</uni-list>
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted } from 'vue';
	import request from '../../common/request';
	
	const visitor = uni.getStorageSync('visitor')
	
	const createConv = async (user: {_id: string}) => {
		const { code, data } = await request.post('/createConv', { userId: [visitor._id] })
		if (code) {
			console.log('createConv', data)
			uni.switchTab({
				url: '/pages/index/index'
			})
		}
	}
</script>

<style lang="scss">
.visitor-info {
	height: 300rpx;
	background-color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding: 0 20rpx;
	box-sizing: border-box;
	.avatar {
		width: 120rpx;
		height: 120rpx;
		border: 1rpx solid #333;
		border-radius: 8rpx;
		overflow: hidden;
	}
	.visitor-warp {
		padding-left: 20rpx;
		font-size: 22rpx;
		color: #666666;
		display: flex;
		flex-direction: column;
		text {
			margin-bottom: 10rpx;
		}
		.visitor-remarks {
			font-size: 30rpx;
			color: #333;
			font-weight: bold;
		}
	}
}
.visitor-bar {
	margin-top: 20rpx;
	.visitor-btn {
		background-color: transparent;
		height: 40rpx;
		line-height: 40rpx;
		font-size: 24rpx;
		border: none;
		outline: none;
		text-align: center;
		font-weight: bold;
		box-sizing: border-box;
		&.send {
			color: #8296FF;
		}
		&.del {
			color: #F56C6C;
		}
	}
}
</style>
